@flex-col: 24;

.flex-clearfix() {
  &:before,
  &:after {
    content: " ";
    display: flex;
    box-sizing: border-box;
    width: 0;
    height: 0;
    font-size: 0;
  }
  &:after {
    clear: both;
  }
}

.flex-col,
.flex-row {
  display: flex;
  flex-wrap: wrap;
  .flex-clearfix();
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-around {
  justify-content: space-around;
}
.flex-between {
  justify-content: space-between;
}
.flex-baseline {
  align-items: baseline;
}
.flex-strech {
  align-items: stretch;
}

.flex-item {
  flex-grow: 1;
  flex-shrink: 0;
}

.flex-item-fixed {
  flex-grow: 0;
}

// 递归生成栅格
.build-item(@i) when (@i > 0) {
  .build-item((@i - 1));

  // 栅格
  .flex-item-@{i} {
    flex-grow: 0;
    //width: percentage(@i / @flex-col);
    flex-basis: percentage(@i / @flex-col);
  }

  // 向左偏移
  .flex-offset-@{i} {
    margin-left: percentage(@i / @flex-col);
  }

  // 排序
  .flex-order-@{i} {
    order: @i;
  }
}

.build-item(@flex-col);

// flex-row的对齐方式
.build-align(@type) when (@type = row) {
  // 辅轴对齐
  &.flex-top {
    align-items: flex-start;
  }
  &.flex-middle {
    align-items: center;
  }
  &.flex-bottom {
    align-items: flex-end;
  }
  // 主轴对齐
  &.flex-left {
    justify-content: flex-start;
  }
  &.flex-center {
    justify-content: center;
  }
  &.flex-right {
    justify-content: flex-end;
  }
}
// flex-col的对齐方式
.build-align(@type) when (@type = column) {
  // 主轴对齐
  &.flex-top {
    justify-content: flex-start;
  }
  &.flex-middle {
    justify-content: center;
  }
  &.flex-bottom {
    justify-content: flex-end;
  }
  // 辅轴对齐
  &.flex-left {
    align-items: flex-start;
  }
  &.flex-center {
    align-items: center;
  }
  &.flex-right {
    align-items: flex-end;
  }
}

.flex-col {
  .build-align(column);
}
.flex-row {
  .build-align(row);
}

[class*="flex-item"] {
  &.flex-item-baseline {
    align-self: baseline;
  }
  &.flex-item-stretch {
    align-self: stretch;
  }
  &.flex-item-top {
    align-self: flex-start;
  }
  &.flex-item-bottom {
    align-self: flex-end;
  }
  &.flex-item-center {
    align-self: center;
  }
}
